<template>
  <div class="address-container">

    <el-select
      :style="{width: itemWidth}"
      v-model="form.provinceCode"
      @change="getCityList"
      :filterable="filterable"
      placeholder="省份"
    >
      <el-option
        v-for="item in provinceList"
        :key="item.citycode"
        :label="item.name"
        :value="item.citycode">
      </el-option>
    </el-select>

    <el-select
      :style="{width: itemWidth}"
      v-model="form.cityCode"
      @change="getDistrictList"
      :filterable="filterable"
      placeholder="城市"
      v-if="zoom === 2 || zoom === 3"
    >
      <el-option
        v-for="item in cityList"
        :key="item.citycode"
        :label="item.name"
        :value="item.citycode">
      </el-option>
    </el-select>

    <el-select
      :style="{width: itemWidth}"
      v-model="form.countyCode"
      @change="emitData"
      :filterable="filterable"
      placeholder="区县"
      v-if="zoom === 3"
    >
      <el-option
        v-for="item in districtList"
        :key="item.citycode"
        :label="item.name"
        :value="item.citycode">
      </el-option>
    </el-select>

  </div>
</template>

<script>
import { getProvinceList, getCityList } from "@api/common";

export default {
  name: 'address-select',
  props: {
    address: Object,
    zoom: {
      type: Number,
      default: 3
    },
    itemWidth: {
      type: String,
      default: 'unset'
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'address',
    event: 'change'
  },
  data () {
    return {
      provinceList: [],
      cityList: [],
      districtList: [],
      form: {
        provinceCode: '',
        cityCode: '',
        countyCode: ''
      }
    }
  },
  methods: {
    async getProvinceList () {
      try {
        const { code, result } = await getProvinceList()
        if (code !== 200) return
        this.provinceList = result
      } catch (error) {
        console.log(error)
      }
    },
    async getCityList (val) {
      const {code, result} = await getCityList({cityCode: val})
      if (code !== 200) return
      this.form.cityCode = ''
      this.form.countyCode = ''
      this.districtList = []
      this.cityList = result
      this.emitData()
    },
    async getDistrictList (val) {
      const {code, result} = await getCityList({cityCode: val})
      if (code !== 200) return
      this.form.countyCode = ''
      this.districtList = result
      this.emitData()
    },
    emitData () {
      const { provinceCode, cityCode } = this.form
      switch (this.zoom) {
        case 1:
          this.$emit('change', { provinceCode })
          break
        case 2:
          this.$emit('change', { provinceCode, cityCode })
          break
        default:
          this.$emit('change', this.form)
      }
    },
    // 重置
    reset () {
      this.form = {
        provinceCode: '',
        cityCode: '',
        countyCode: ''
      }
      this.emitData()
    },
  },
  created () {
    this.getProvinceList()
  }
}
</script>

<style lang="less" scoped>
.address-container {
  /deep/.el-select {
    margin-right: 10px;
  }
}
</style>